<template>
	<view class="m-pay">
		<view class="_pay_line">
			<label class="_line_title _ctx">{{contentText}}</label>
			<label class="_line_content">塔罗数字占卜#{{content}}状况#</label>
		</view>
		<view class="_pay_line">
			<label class="_line_title _ctx">{{priceText}}</label>
			<label class="_line_content _del">原价:{{price}}</label>
		</view>
		<view class="_pay_line">
			<label class="_line_title _ctx" :animation="animationData">{{payTime}}</label>
			<label class="_line_content"><label class="_dcount">限时优惠</label>{{getDiscount}}</label>
		</view>
		<view class="_pay_line _last">
			<label class="_line_title">已有{{percount}}人参与测算</label>
			<label class="_line_content _hp">好评率:{{play}}%</label>
		</view>
		<view class="_pay">
			<button class="_pay_btn" @tap="pay"  v-show="isPay">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			contentText:{
				type:String,
				default:'占卜内容'
			},
			priceText:{
				type:String,
				default:'商品价格'
			},
			payTimeText:{
				type:String,
				default:''
			},
			content:{
				type:String,
				default:'占卜内容'
			},
			price:{
				type:Number,
				default:18.9
			},
			payTime:{
				type:String,
				default:''
			},
			// 折后价格
			discount:{
				type:Number,
				default:0.98
			},
			percount:{
				type:Number,
				default:10000
			},
			play:{
				type:String,
				default:'98.8'
			},
			animationData:{
				type:String,
				default:''
			},
			isPay:{
				type:Boolean,
				default:true
			}
			
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			
		},
		methods:{
			pay(){
				this.$emit('click')
			}
		},
		computed:{
			//计算折后价格
			getDiscount(){
				return  (this.discount).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.m-pay{
		display:inline-block;
		position:relative;
		width:623upx;
		height:555upx;
		font-size:11pt;
		padding:30upx;
		background-color:white;
		border-radius:35upx;

		._pay_line{
			width:100%;
			margin-top: 15upx;
			padding-bottom:15upx;
			border-bottom:1px solid #BBBBBB;
			display:inline-block;
			height: 70upx;
			line-height:70upx;

			
			._line_title{
				width:60%;
				position:absolute;
				display:inline-block;
				font-size: 9pt;
			}
			
			._ctx{
				width:60%;
			}
			
			._del{
				text-decoration: line-through;
			}
			
			._line_content{
				display:inline-block;
				width:65%;
				position:relative;
				text-align:right;
				font-size:9pt;
				float:right;
				
				._dcount{
					font-size: 8pt;
					color: red;
					margin-right:15upx;
					padding: 10upx;
					border: 1upx solid red;
					border-radius: 45upx;
					width:125upx;
				}
			}
			._hp{
				width: 55%;
			}
		}
		._last{
			height:25upx;
			font-size:7pt;
			color:gray;
			line-height:25upx;
		}
		
		._pay{
			position:absolute;
			width:100%;
			margin:auto;
			left:0px;
			bottom:0px;
			background-color:#CBBB53;
			border-top-left-radius: 0upx;
			border-top-right-radius: 0upx;
			border-bottom-left-radius:35upx;
			border-bottom-right-radius:35upx;
			
			._pay_btn{
				color: white;
				background-color: #CBBB53;
				border-top-left-radius: 0upx;
				border-top-right-radius: 0upx;
				border-bottom-left-radius:35upx;
				border-bottom-right-radius:35upx;
			}
		}
	}
</style>
